---
title: Authentification
description: Une introduction à l'authentification avec Astro
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import UIFrameworkTabs from '~/components/tabs/UIFrameworkTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

L'authentification et l'autorisation sont deux processus de sécurité qui gèrent l'accès à votre site web ou à votre application. L'authentification permet de vérifier l'identité d'un visiteur, tandis que l'autorisation permet d'accéder à des zones et des ressources protégées.

L'authentification vous permet de personnaliser les zones de votre site pour les personnes connectées et offre la meilleure protection pour les informations personnelles ou privées. Les bibliothèques d'authentification (par exemple [Better Auth](https://better-auth.com/), [Clerk](https://clerk.com)) fournissent des utilitaires pour plusieurs méthodes d'authentification telles que la connexion par e-mail et les fournisseurs OAuth.

:::tip
Il n'y a pas de solution d'authentification officielle pour Astro, mais vous pouvez trouver [dans les intégrations de la communauté en recherchant « auth »](https://astro.build/integrations/?search=auth).
:::

<ReadMore>Voir comment [ajouter une authentification avec Supabase](/fr/guides/backend/supabase/#ajouter-les-informations-didentification-de-supabase) ou [ajouter une authentification avec Firebase](/fr/guides/backend/firebase/#ajouter-lauthentification-avec-firebase) dans nos guides dédiés à ces services backend.</ReadMore>

## Better Auth

Better Auth est un framework indépendant d'authentification (et d'autorisation) pour TypeScript. Il fournit un ensemble complet de fonctionnalités prêtes à l'emploi et comprend un écosystème de modules d'extension qui simplifie l'ajout de fonctionnalités avancées.

Il prend en charge Astro dès le départ et vous pouvez l'utiliser pour ajouter une authentification à votre projet Astro.

### Installation

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install better-auth
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add better-auth
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add better-auth
  ```
  </Fragment>
</PackageManagerTabs>

Pour des instructions de configuration détaillées, consultez le [Guide d'installation de Better Auth](https://www.better-auth.com/docs/installation).

### Configuration

Configurez votre table de base de données pour stocker les données utilisateur et vos méthodes d'authentification préférées comme décrit dans le [Guide d'installation de Better Auth](https://www.better-auth.com/docs/installation#configure-database). Ensuite, vous devrez monter le gestionnaire Better Auth dans votre projet Astro.

```ts title="src/pages/api/auth/[...all].ts"
import { auth } from "../../../lib/auth"; // importe votre instance Better Auth
import type { APIRoute } from "astro";

export const prerender = false; // Pas nécessaire en mode `server`

export const ALL: APIRoute = async (ctx) => {
	return auth.handler(ctx.request);
};
```

Suivez le [guide Astro de Better Auth](https://www.better-auth.com/docs/integrations/astro) pour en savoir plus.

### Utilisation

Better Auth propose un assistant `createAuthClient` pour divers frameworks, dont Vanilla JS, React, Vue, Svelte et Solid.

Par exemple, pour créer un client pour React, importez l'assistant depuis `'better-auth/react'` :



<UIFrameworkTabs>
  <Fragment slot="react">
   ```ts title="src/lib/auth-client.ts"
  import { createAuthClient } from 'better-auth/react';

  export const authClient = createAuthClient();

  export const { signIn, signOut } = authClient;
  ```
  </Fragment>
  <Fragment slot="solid">
  ```ts title="src/lib/auth-client.ts"
  import { createAuthClient } from 'better-auth/solid';

  export const authClient = createAuthClient();

  export const { signIn, signOut } = authClient;
  ```
  </Fragment>
  <Fragment slot="svelte">
   ```ts title="src/lib/auth-client.ts"
  import { createAuthClient } from 'better-auth/svelte';

  export const authClient = createAuthClient();

  export const { signIn, signOut } = authClient;
  ```
  </Fragment>
  <Fragment slot="vue">
  ```ts title="src/lib/auth-client.ts"
  import { createAuthClient } from 'better-auth/vue';

  export const authClient = createAuthClient();

  export const { signIn, signOut } = authClient;
  ```
  </Fragment>
</UIFrameworkTabs>

Une fois votre client configuré, vous pouvez l'utiliser pour authentifier les utilisateurs dans vos composants Astro ou dans tout fichier spécifique au framework. L'exemple suivant ajoute la possibilité de se connecter ou de se déconnecter avec vos fonctions configurées `signIn()` et `signOut()`.


```astro title="src/pages/index.astro"
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Se connecter</button>
  <button id="logout">Se déconnecter</button>

  <script>
    const { signIn, signOut } = await import("./lib/auth-client")
    document.querySelector("#login").onclick = () => signIn.social({
      provider: "github",
      callbackURL: "/dashboard",
    })
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>
```

Vous pouvez ensuite utiliser l'objet `auth` pour obtenir les données de session de l'utilisateur dans votre code côté serveur. L'exemple suivant personnalise le contenu de la page en affichant le nom d'un utilisateur authentifié :

```astro title="src/pages/index.astro"
---
import { auth } from "../../../lib/auth"; // importe votre instance Better Auth

export const prerender = false; // Pas nécessaire en mode `server`
 
const session = await auth.api.getSession({
	headers: Astro.request.headers,
});
---

<p>{session.user?.name}</p>
```

Vous pouvez également utiliser l'objet `auth` pour protéger vos routes à l'aide d'un middleware. L'exemple suivant vérifie si un utilisateur essayant d'accéder à une route du tableau de bord protégée est authentifié et le redirige vers la page d'accueil dans le cas contraire.

```ts title="src/middleware.ts"
import { auth } from "../../../auth"; // importe votre instance Better Auth
import { defineMiddleware } from "astro:middleware";
 
export const onRequest = defineMiddleware(async (context, next) => {
	const isAuthed = await auth.api
		.getSession({
			headers: context.request.headers,
		})
	if (context.url.pathname === "/dashboard" && !isAuthed) {
		return context.redirect("/");
	}
	return next();
});
```

### Prochaines étapes

- [Guide Astro de Better Auth](https://www.better-auth.com/docs/integrations/astro)
- [Exemple d'utilisation d'Astro avec Better Auth](https://github.com/better-auth/examples/tree/main/astro-example)
- [Documentation Better Auth](https://www.better-auth.com/docs)
- [Dépôt Github de Better Auth](https://github.com/better-auth/better-auth)

## Clerk

Clerk est une suite complète d'interfaces utilisateur intégrables, d'API flexibles et de tableaux de bord d'administration pour authentifier et gérer vos utilisateurs. Clerk propose un [kit de développement logiciel (SDK) officiel pour Astro](https://clerk.com/docs/references/astro/overview).

### Installation

Installez `@clerk/astro` en utilisant le gestionnaire de paquets de votre choix.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install @clerk/astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add @clerk/astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add @clerk/astro
  ```
  </Fragment>
</PackageManagerTabs>

### Configuration

Suivez [le guide de démarrage rapide Astro de Clerk](https://clerk.com/docs/quickstarts/astro) pour configurer l'intégration et le middleware de Clerk dans votre projet Astro.

### Utilisation

Clerk fournit des composants qui vous permettent de contrôler la visibilité des pages en fonction de l'état d'authentification de votre utilisateur. Affichez aux utilisateurs déconnectés un bouton de connexion au lieu du contenu disponible pour les utilisateurs connectés :

```astro title="src/pages/index.astro"
---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';

export const prerender = false; // Pas nécessaire en mode `server`
---

<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>
```

Clerk vous permet également de protéger les routes sur le serveur à l'aide d'un middleware. Spécifiez les routes protégées et invitez les utilisateurs non authentifiés à se connecter :

```ts title="src/middleware.ts"
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)',
]);

export const onRequest = clerkMiddleware((auth, context) => {
  if (!auth().userId && isProtectedRoute(context.request)) {
    return auth().redirectToSignIn();
  }
});
```

### Prochaines étapes

- Lisez la [documentation officielle de `@clerk/astro`](https://clerk.com/docs/references/astro/overview)
- Commencez à partir d'un modèle avec le [projet de démarrage rapide Clerk + Astro](https://github.com/clerk/clerk-astro-quickstart)

## Lucia

[Lucia](https://lucia-auth.com/) est une ressource permettant d'implémenter l'authentification basée sur la session dans un certain nombre de frameworks, notamment Astro.

### Guides

<Steps>

1. Créez une [API de sessions de base](https://lucia-auth.com/sessions/basic-api/) avec la base de données de votre choix.
2. Ajoutez [des cookies de session](https://lucia-auth.com/sessions/cookies/astro) à l’aide de points de terminaison et de middleware.
3. Implémentez [GitHub OAuth](https://lucia-auth.com/tutorials/github-oauth/astro) à l’aide des API que vous avez implémentées.

</Steps>

### Exemples

- [Exemple de GitHub OAuth dans Astro](https://github.com/lucia-auth/example-astro-github-oauth)
- [Exemple de Google OAuth dans Astro](https://github.com/lucia-auth/example-astro-google-oauth)
- [Exemple d'email et de mot de passe avec 2FA dans Astro](https://github.com/lucia-auth/example-astro-email-password-2fa)
- [Exemple d'email et de mot de passe avec 2FA et WebAuthn dans Astro](https://github.com/lucia-auth/example-astro-email-password-webauthn)

## Ressources communautaires

- [Utilisation de Microsoft Entra Id EasyAuth avec Astro et Azure Static Web App](https://agramont.net/blog/entra-id-easyauth-with-astro/) (Anglais)
